<!DOCTYPE html>
<html>
	<head>
	  	<meta charset="UTF-8">
		<script src="../../public/js/tmpl.js"></script>
		<script>
			var content = template('Phead_resource', {
				title: '课程详情'
			});
			document.write(content);
		</script>
	</head>
	<body class="wrap_bg">
		
		<header class="show_banner">
			<ul data-am-widget="gallery" class="am-gallery am-avg-sm-1
			  am-gallery-overlay bannerImg" data-am-gallery="{ pureview: true }" >
			    
			</ul>
		</header>
		
		<!--主体-->
		<section class="padding10">
			<ul class="panner">
		    	<li class="panner_item bgs0 padding10" id="demo1">
		    		<div class="am-g padding-v10 personal_info">
	    			
	    			</div>
		        </li>
		       
		    </ul>
			
		    <ul class="panner">
		    	<li class="panner_item">
			        <p class="padding10 bg0 color-white am-text-sm">
			          	<img class="img_icon" src="../../public/img/icon/money@2x.png" alt="" />
			          	<span>预约教练价格</span>
			        </p>
			        <div class="bgs0 color-grey padding10 buildBody_price">
			          
			        </div>
		        </li>
		        <li class="panner_item">
			        <p class="padding10 bg0 color-white am-text-sm">
			          	<img class="img_icon" src="../../public/img/icon/service@2x.png" alt="" />
			          	<span>服务内容</span>
			        </p> 
			        <div class="bgs0 color-grey padding10 areaDescribe">
			          
			        </div>
		        </li>
		        <!--<li class="panner_item">
			        <p class="padding10 bg0 color-white am-text-sm">
			        	<img class="img_icon" src="../../public/img/icon/field@2x.png" alt="" />
			          	<span>场地介绍</span>
			        </p> 
			        <div class="bgs0 color-grey padding10 areaDescribe">
			          
			        </div>
		        </li>-->
		        <li class="panner_item">
			        <p class="padding10 bg0 color-white am-text-sm">
			        	<img class="img_icon" src="../../public/img/icon/seat@2x.png" alt="" />
			          	<span>地址</span>
			        </p>
			        <div class="bgs0 color-grey padding10 address">
			          	
			        </dd>
		        </li>
		        <li class="panner_item">
			        <p class="padding10 bg0 color-white am-text-sm">
			        	<img class="img_icon" src="../../public/img/icon/Matter@2x.png" alt="" />
			          	<span>注意事项</span>
			        </p>
			        <div class="bgs0 color-grey padding10">
			        	<ul class="matters_attention">
			        		
			        	</ul>
			        	<p>重要:成功预约就表示已经阅读并同意<a href="../common/agreeMent.html" class="textD">《店铺运动注意事项及免责声明》</a></p>
			        </dd>
		        </li>
		        <li class="panner_item">
			        <p class="padding10 bg0 color-white am-text-sm">
			        	<img class="img_icon" src="../../public/img/icon/step@2x.png" alt="" />
			          	<span>健身步骤</span>
			        </p>
			        <div class="bgs0 color-grey padding10 am-center">
			        	<ul class="appointment_progress padding10">
			        		<p class="border_left"></p>
			        		<li class="">
			        			<span class="progress_num active_bg">1</span>
			        			<p class="bgwhite am-text-center progress_text">预约付费成功</p>
			        		</li>
			        		<li class="">
			        			<span class="progress_num active_bg">2</span>
			        			<p class="bgwhite am-text-center progress_text">点击开门扫一扫</p>
			        		</li>
			        		<li class="">
			        			<span class="progress_num active_bg">3</span>
			        			<p class="bgwhite am-text-center progress_text">扫描门禁二维码</p>
			        		</li>
			        		<li class="">
			        			<span class="progress_num active_bg">4</span>
			        			<p class="bgwhite am-text-center progress_text">验证成功入场健身</p>
			        		</li>
			        	</ul>
			        </dd>
		        </li>
		    </ul>
		</section>
		
		<!--底部按钮-->
		<footer class="footer_nav am-text-center">
			<span id="trigger3" class="active_bg am-text-sm padding10 am-block color-white" >
				预约
			</span>
		</footer>
		
		<!--模板-->
		<!--banner-->
		<script id="banner" type="text/html">
			{{each bannerInfo}}
		    <li>
		        <div class="am-gallery-item">
		            <a href="{{$value.imgsrc}}" class="">
		              <img src="{{$value.imgsrc}}" class="img" alt="{{$value.tit}}"/>
		            </a>
		        </div>
		    </li>
		    {{/each}}
		    <p class="color-white am-text-sm padding10"><span class="banner_num">{{bannerInfo.length}}</span>&nbsp;<i class="am-icon-camera am-icon-fw"></i></p>
		</script>
		
		
		<!--个人简介-->
		<script id="personal_info" type="text/html">
			<div class="color-grey am-u-sm-9 padding0">
				<p class="color-white am-text-lg marginb5">{{personal_info.name}}</p>
		        <p class="am-text-justify elps_three">{{personal_info.introduction}}</p>
		   		<p class="am-text-center look_moreIcon"><span class="am-icon-angle-down am-icon-fw am-text-lg"></span></p>
			</div>
		    <a href="javascript:void(0);" class="am-u-sm-3">
		    	<img class="am-circle am-img-thumbnail" src="{{personal_info.imgsrc}}" style="width:60px;height: 60px;"/>
		    </a>
		</script>
		
		
		<!--健身价格-->
		<script id="price" type="text/html">
			<span>{{buildBody_price.tit}}</span>
			<p class="am-text-justify">{{buildBody_price.describe}}</p>
		</script>
		
		<!--场地简介-->
		<script id="areaDescribe" type="text/html">
			<p class="am-text-justify">{{areaDescribe.describe}}</p>
		</script>
		
		<!--地址-->
		<script id="address" type="text/html">
			<span class="am-text-justify">{{address.describe}}</span>
			<!--<a href="javascript:viod(0);" class="color-active">查看地图</a>-->
		</script>
		
		<!--注意事项-->
		<script id="matters_attention" type="text.html">
			{{each matters_attention}}
			<li class="marginb5">
    			{{$index+1}}. {{$value.describe}}
    		</li>
    		{{/each}}
		</script>
		
		<script>
			var content = template('progress_status', {});
			document.write(content);
		</script>
		
		<script>
			var content = template('Pfoot_resource', {});
			document.write(content);
		</script>
		<script>
		
			(function($,arttmpl){
				var bannerInfo = [
					{imgsrc:'http://s.amazeui.org/media/i/demos/bing-1.jpg',tit:''},
					{imgsrc:'http://s.amazeui.org/media/i/demos/bing-2.jpg',tit:''},
					{imgsrc:'http://s.amazeui.org/media/i/demos/bing-3.jpg',tit:''},
					{imgsrc:'http://s.amazeui.org/media/i/demos/bing-4.jpg',tit:''},
				];
				
				var personal_info={
					name:'二空',
					introduction:'二空，健身是一生的事业，拥有来没多项认证Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi ratione.',
					imgsrc:'../../public/img/shop/buildbody_img003.jpg'
				};
				
				
				var buildBody_price={
					tit:'课程价格详见课程表',
					describe:'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius sunt reprehenderit sequi. Omnis reiciendis molestias numquam perspiciatis dolorum qui aliquid animi nulla necessitatibus vero est earum quasi nostrum voluptate consectetur.'
				};
				
				var areaDescribe = {
					describe:'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius sunt reprehenderit sequi. Omnis reiciendis molestias numquam perspiciatis dolorum qui aliquid animi nulla necessitatibus vero est earum quasi nostrum voluptate consectetur.'
				};
				
				var address = {
					lng:'30.123',
					lat:'32.25',
					describe:'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius sunt reprehenderit sequi. Omnis reiciendis molestias numquam perspiciatis dolorum qui aliquid animi nulla necessitatibus vero est earum quasi nostrum voluptate consectetur.'
				}
				
				var matters_attention =[
					{describe:'二空，健身是一生的事业，拥有来没多项认证 Lorem ipsum dolor sit amet, c'},
					{describe:'二空，健身是一生的事业，拥有来没多项认证 Lorem ipsum dolor sit amet, c'},
					{describe:'二空，健身是一生的事业，拥有来没多项认证 Lorem ipsum dolor sit amet, c'},
					{describe:'二空，健身是一生的事业，拥有来没多项认证 Lorem ipsum dolor sit amet, c'}
				];
				
				/*绘制banner*/
				var drawBanner = function(data){
					var d = {
						bannerInfo:data
					};
					
					var content = arttmpl('banner',  d);
					$('.bannerImg').html(content);
				};
				
				var drawPersonalInfo = function(data){
					var d = {
						personal_info:data
					};
					
					var content = arttmpl('personal_info',  d);
					$('.personal_info').html(content);
				};
				
				/*绘制健身价格*/
				var drawPrice = function(data){
					var d = {
						buildBody_price:data
					};
					
					var content = arttmpl('price',  d);
					$('.buildBody_price').html(content);
				}
				
				/*场地简介*/
				var drawAreaDescribe = function(data){
					var d = {
						areaDescribe:data
					};
					
					var content = arttmpl('areaDescribe',  d);
					$('.areaDescribe').html(content);
				}
				
				/*绘制地址*/
				var drawAddress = function(data){
					var d = {
						address:data
					};
					
					var content = arttmpl('address',  d);
					$('.address').html(content);
				}
				
				/*注意事项*/
				var drawMattersAttention = function(data){
					var d = {
						matters_attention:data,
					};
					
					var content = arttmpl('matters_attention',d);
					$('.matters_attention').html(content);
				}
				
				
				/*banner成功回调*/
				var sucessCallback_Banner = function(res){
					drawBanner(res);
				}
				
				var sucessCallback_PersonalInfo = function(res){
					drawPersonalInfo(res);
				}
				
				/*价格成功回调*/
				var sucessCallback_Price = function(res){
					drawPrice(res);
				}
				
				/*场地描述成功回调*/
				var sucessCallback_AreaDescribe = function(res){
					drawAreaDescribe(res);
				}
				
				/*地址成功回调*/
				var sucessCallback_Address = function(res){
					drawAddress(res);
				}
				
				/*注意事项成功回调*/
				var sucessCallback_MattersAttention = function(res){
					drawMattersAttention(res);
				}
				
				
				var errorcallback = function(statuscode, statusmsg) {
					console.log(statuscode + "  " + statusmsg);
				};
					
				var faildcallback = function(xhr, errtype, errthow) {
					console.log(xhr.readyState + "  " + xhr.status + "  " + xhr.statusText);
				};
	
				
				
				/*banner请求数据*/
				var Getbanner_data = function(op, sucessCallback, errorcallback, faildcallback){
					request('url', 't', 'd', bannerInfo, sucessCallback, errorcallback, faildcallback);
				}
				
				var getPersonalInfo_data = function(op, sucessCallback, errorcallback, faildcallback){
					request('url', 't', 'd', personal_info, sucessCallback, errorcallback, faildcallback);
				}
				
				
				/*健身价格请求数据*/
				var GetPrice_data = function(op, sucessCallback, errorcallback, faildcallback){
					request('url', 't', 'd', buildBody_price, sucessCallback, errorcallback, faildcallback);
				}
				
				/*场地描述请求数据*/
				var GetAreaDescribe_data = function(op, sucessCallback, errorcallback, faildcallback){
					request('url', 't', 'd', areaDescribe, sucessCallback, errorcallback, faildcallback);
				}
				
				/*地址请求数据*/
				var GetAddress_data = function(op, sucessCallback, errorcallback, faildcallback){
					request('url', 't', 'd', address, sucessCallback, errorcallback, faildcallback);
				}
				
				/*注意事项请求数据*/
				var GetMattersAttention_data = function(op, sucessCallback, errorcallback, faildcallback){
					request('url', 't', 'd', matters_attention, sucessCallback, errorcallback, faildcallback);
				}
				
				
				var init = function(){
					
					Getbanner_data('op', sucessCallback_Banner, errorcallback, faildcallback);
					getPersonalInfo_data('op', sucessCallback_PersonalInfo, errorcallback, faildcallback);
					GetPrice_data('op', sucessCallback_Price, errorcallback, faildcallback);
					GetAreaDescribe_data('op', sucessCallback_AreaDescribe, errorcallback, faildcallback);
					GetAddress_data('op', sucessCallback_Address, errorcallback, faildcallback);
					GetMattersAttention_data('op', sucessCallback_MattersAttention, errorcallback, faildcallback);
					var $modal = $('#my-modal-loading');
					$modal.hide();
				}
				
				init();
				
				
			})(jQuery,template);
			
			
			$(function(){
				
				var $trigger = $('#trigger3');
				
				var triggerNum = 0;
				var start_time = '';
				var end_time = '';
				
				
				var cur = current('月');
				var dayArr=[];
				cur.forEach(function(item, index){
					dayArr.push(item.d)
				});
				
				var numArr1=dayArr;
				var numArr2=['凌晨0点','凌晨1点','凌晨2点','凌晨3点','凌晨4点','凌晨5点','凌晨6点','早上7点','早上8点','早上9点','上午10点','上午11点','中午12点','中午13点','下午14点','下午15点','下午16点','下午17点','下午18点','晚上19点','晚上20点','晚上21点','晚上22点','晚上23点'];
				var numArr3=['00分','10分','20分','30分','40分','50分'];
				
				var mobileSelect3 = new MobileSelect({
				    trigger: '#trigger3',
				    title: '开始时间',
				    ensureBtnColor:'#d95d80',
				    cancelBtnColor:'#d95d80',
				    wheels: [
				                {data: numArr1},
				                {data: numArr2},
				                {data: numArr3},
				            ],
				    position:[0, 10, 0], 
				    transitionEnd:function(indexArr, data){
				    },
				    callback:function(indexArr, data){
				    
				    	
				    	if(triggerNum==0){ 
				    		start_time = data;
				    		var T = setTimeout(function(){
					    		
					    		mobileSelect3.setTitle('结束时间');
					    		mobileSelect3.updateWheel(0,['']);
					    		mobileSelect3.show();
					    		
					    		clearTimeout(T);
					    		
					    	},500);
					    }	
					    
					    if(triggerNum==1){end_time = data};
					    
				    	triggerNum++;
				    	
				    	
				    	//再次触发选择时间
				    	if(triggerNum==2){
				    		mobileSelect3.setTitle('开始时间');
				    		triggerNum=0;
				    		
				    		window.location = '../ReservationSite/order_info.html?start_time='+start_time+'&end_time='+end_time;
//				    		alert(start_time+"///"+end_time);
				    	};
//				       $trigger.html('自助健身')

						
				    }
				});
				
			})		
		
		
		</script>
	</body>
</html>
